<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //? 首节流 是指在时间间隔内的第一次触发事件时立即执行函数，然后在间隔时间内忽略所有的触发事件
    function throttleFirst(fn,delay) {
        //? 记录是否是首次
        let flag = false
        //? 记录时间戳
        let time = Date.now()
        return function (...args) {
            const now = Date.now()
            //? 第一次或者超过事件间隔时触发事件
            if (!flag || now - time >= delay) {
                fn(...args)
                //? 不再为第一次
                flag = true
                //? 更新这一次的执行时间 拦截time + delay时间内的所有调用
                time = now
            }
        }
    }
    function testThrottleFirst() {
        console.log('throttleFirst test start');
        const throttleFunc = throttleFirst(function() {
            console.log('throttleFirst function called');
        }, 1000);
        throttleFunc(); //? 第一次触发
        setTimeout(throttleFunc, 500);
        setTimeout(throttleFunc, 1000);
        setTimeout(throttleFunc, 1500); //? 超时触发 此时函数里的time还是第一次的time 因为上个代码没有执行if里的
    }
    testThrottleFirst();
</script>
</body>
</html>
